<template>
  <div class="bg-f2">
    <div class="" style="height: 420px">
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="bg-f2 bg-fff">
            <el-row class="pt_10">
              <el-col :span="8">
                <span class="tabulationTime">制表时间:{{ currentTime }}</span>
              </el-col>
              <el-col :span="8" align="center"><span class="title">工单统计</span></el-col>
              <el-col :span="8" align="right">
                <el-link type="primary" icon="el-icon-download" :underline="false" :href="exportBtn()" target="_blank">全部导出</el-link>
              </el-col>
            </el-row>
            <el-table
              height="360"
              ref="workOrderStatistics"
              :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '40px' }"
              :data="tableData"
              show-summary
              :summary-method="getSummaries"
              @row-click="rowClick"
              highlight-current-row
              border
              stripe
              v-loading="tableLoad"
            >
              <template slot="empty">{{ tableMessage }}</template>
              <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
              <el-table-column prop="gdzt" label="工单状态" min-width="180">
                <template slot-scope="scope">
                  <span>{{ workOrderType[scope.row.gdzt - 1] }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="count" label="工单数量" min-width="180"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="bg-f2 bg-fff">
            <div class="title">工单统计</div>
            <div style="height: 370px">
              <echarts-load v-if="pieFlag || reload_pie" :chartFlag="pieFlag" :reload="reload_pie" @refreshF="refreshPie" />
              <zczxl-bar v-else :zxlbarData="echartsData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 表格 -->
    <div class="b bg-f2 bg-fff">
      <!-- 搜索条件 -->
      <el-form :inline="true" :model="searchCriteria" class="demo-form-inline">
        <el-form-item label="工单等级:">
          <el-select v-model.trim="searchCriteria.workOrderLevel" clearable placeholder="选择工单类型">
            <el-option label="一般" :value="1"></el-option>
            <el-option label="加急" :value="2"></el-option>
            <el-option label="紧急" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接单时间:">
          <el-date-picker
            v-model="searchCriteria.dataTime"
            :picker-options="pickerBeginDateBefore"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="searchCriteria.namer" width="200" prefix-icon="el-icon-search" clearable placeholder="输入设备名称或设备IP"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" icon="el-icon-download" :underline="false" :href="paginationExportBtn()" target="_blank">导出</el-link>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        ref="multipleTable"
        :data="tableData_details"
        style="width: 100%"
        border
        stripe
        v-loading="tableLoad_details"
      >
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage_details }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column prop="gdbh" label="工单编号" :show-overflow-tooltip="true" min-width="150"></el-table-column>
        <el-table-column prop="zcmc" label="资产名称" :show-overflow-tooltip="true" min-width="150"></el-table-column>
        <el-table-column label="安装地址" min-width="150" :show-overflow-tooltip="true">
          <template slot-scope="scope">{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.xxdz }}</template>
        </el-table-column>
        <el-table-column prop="sbip" label="IP地址" min-width="120"></el-table-column>
        <el-table-column prop="slrzsxm" label="受理人" min-width="200"> </el-table-column>
        <el-table-column prop="dqclrzsxm" label="接单人" min-width="200"> </el-table-column>
        <el-table-column prop="slsj" label="接单时间" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.slsj | dateFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gddj" label="工单等级" min-width="100">
          <template slot-scope="scope">
            <el-tag :type="gddj[scope.row.gddj - 1].tagType">{{ gddj[scope.row.gddj - 1].tagText }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12"> </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="sizes,total,prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { timeLoad, tableMessageText, timestampToTime } from '@/assets/js/setTime'
import { yeWu } from '@/utils/allUrl.js'
import zczxlBar from '@/components/Echarts/TJ/zczxl'
import echartsLoad from '@/components/Echarts/echartsLoad'
export default {
  data() {
    return {
      currentTime: '', // 制表时间
      workOrderType: ['已受理', '待确认', '正常关闭', '驳回', '挂起', '外派', '异常关闭'],
      gddj: [
        { tagType: 'success', tagText: '一般' },
        { tagType: 'warning', tagText: '加急' },
        { tagType: 'danger', tagText: '紧急' },
      ],
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      tableData: [],
      tableLoad: false,
      tableTimer: null,
      pieFlag: false,
      reload_pie: false,
      pieTimer: null,
      echartsData: {
        title: '工单状态',
        color: '#91CC75',
        danwei: '',
        wz: [],
        sj: [],
      },
      tableMessage: '',
      workOrderLevelOptions: [], // 工单等级
      searchCriteria: {
        workOrderLevel: '', // 工单等级
        dataTime: '', // 接单时间
        namer: '',
      },
      tableData_details: [],
      tableLoad_details: false,
      tableMessage_details: '',
      tableTimer_details: null,
      currentPage: 1, // 页码
      total: 0, // 总条数
      pageSize: 10, // 每页显示的条目数
      currentRow: '',
    }
  },
  components: { zczxlBar, echartsLoad },
  watch: {
    tableData() {
      this.$nextTick(function () {
        // 默认选中第一行
        this.$refs.workOrderStatistics.setCurrentRow(this.tableData[0])
      })
    },
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableData = []
          this.tableMessage = tableMessageText
        }
      }, timeLoad)
    },
    tableLoad_details(newVal, oldVal) {
      this.tableTimer_details = setTimeout(() => {
        if (this.tableLoad_details) {
          this.tableLoad_details = false
          this.tableData_details = []
          this.tableMessage_details = tableMessageText
          this.total = 0
        }
      }, timeLoad)
    },
    pieFlag(newVal, oldVal) {
      this.pieTimer = setTimeout(() => {
        if (this.pieFlag) {
          this.pieFlag = false
          this.reload_pie = true
        }
      }, timeLoad)
    },
  },
  created() {
    // 获取制表时间
    this.currentTime = timestampToTime().hours_time
    this.initList()
  },
  methods: {
    // 合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((item, index) => {
        if (index === 0) {
          sums[index] = ' '
          return
        }
        var values = data.map((item2) => Number(item2[item.property]))
        if (!values.every((value) => isNaN(value))) {
          if (item.label === '工单状态') {
            sums[index] = '合计'
          } else {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[columns.length - 1] += ''
          }
        }
      })
      this.$nextTick(() => {
        this.$refs.workOrderStatistics.doLayout()
      })
      return sums
    },
    // 加载工单统计列表/echarts
    async initList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      clearTimeout(this.pieTimer) // echarts
      this.pieFlag = true
      // const params = new URLSearchParams()
      // params.append('N_', this.searchCriteria.namer) // 设备名称,IP条件
      // params.append('N_', this.searchCriteria.namer) // 设备名称,IP条件
      const { data: res } = await this.$http.post(yeWu + 'report/getWorkOrderStatus')
      this.tableLoad = false // 表格加载中样式
      this.pieFlag = false // echarts
      switch (res.code) {
        case '0000': // 操作成功
          // 加载详细工单报表
          this.currentRow = res.data.list[0].gdzt
          this.initList_details(res.data.list[0].gdzt)
          this.tableData = res.data.list
          // echarts 图表
          var gdzt = []
          var counts = []
          res.data.list.forEach((item) => {
            gdzt.push(this.workOrderType[item.gdzt - 1])
            counts.push(item.count)
          })
          this.echartsData = {
            title: '工单状态',
            color: '#91CC75',
            danwei: '',
            wz: gdzt,
            sj: counts,
          }
          break
        default:
          this.tableData = []
          this.tableMessage = res.message
          this.echartsData = {
            title: '工单状态',
            color: '#91CC75',
            danwei: '',
            wz: [],
            sj: [],
          }
          this.reload_pie = true // echarts
          // 详细报表
          this.tableData_details = []
          this.tableMessage_details = res.message
          break
      }
    },
    // echarts 刷新
    refreshPie() {
      this.initList()
      this.reload_pie = false
    },
    // 全部导出
    exportBtn() {
      return `${yeWu}gdjs/gongDanExcel`
    },
    // 切换工单统计列表
    rowClick(row) {
      this.currentPage = 1
      this.pageSize = 10
      this.currentRow = row.gdzt
      this.searchCriteria.workOrderLevel = ''
      this.searchCriteria.dataTime = ''
      this.searchCriteria.namer = ''
      // 加载工单统计列表
      this.initList_details(row.gdzt)
    },
    // 加载工单统计-echarts
    async initList_details(gdzt) {
      clearTimeout(this.tableTimer_details)
      this.tableLoad_details = true
      const params = new URLSearchParams()
      const { workOrderLevel, dataTime, namer } = this.searchCriteria
      params.append('GDZT', gdzt) // 工单状态
      params.append('GDDJ', workOrderLevel) // 工单等级
      params.append('GDBH_SBMC_SBIP_DQCLR', namer) // 设备名称,IP条件
      params.append('M_', this.currentPage) // 当前页面
      params.append('N_', this.pageSize) // 当前页数
      // 接单时间
      if (dataTime) {
        params.append('SLKSSJ', dataTime[0] + ' 00:00:00')
        params.append('SLJSSJ', dataTime[1] + ' 23:59:59')
      }
      const { data: res } = await this.$http.post(yeWu + 'gdgl/selectGongDanGuanLiList', params)
      this.tableLoad_details = false // 表格加载中样式
      switch (res.code) {
        case '0000': // 操作成功
          this.tableData_details = res.data.list
          this.total = res.data.total
          break
        default:
          this.tableData_details = []
          this.tableMessage_details = res.message
          break
      }
    },
    // 查询按钮
    onSubmit() {
      this.currentPage = 1
      this.pageSize = 10
      this.initList_details(this.currentRow) // 加载列表
    },
    // 导出
    paginationExportBtn() {
      return `${yeWu}gdjs/gongDanExcel?GDZT=${this.currentRow}`
    },
    // 当前页面显示条数改变
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.initList_details(this.currentRow) // 加载详细列表
    },
    // 切换页面
    handleCurrentChange(val) {
      this.currentPage = val
      this.initList_details(this.currentRow) // 加载列表
    },
  },
}
</script>
<style lang="scss" scoped>
.pt_10 {
  padding-bottom: 10px;
}
.tabulationTime {
  color: #7f7f7f;
}
.title {
  font-size: 16px;
  color: #333333;
}
.b {
  margin-top: 15px;
}
::v-deep .el-table__body tr.current-row > td {
  background-color: #69a8ea !important;
  color: #fff;
}
// ::v-deep .el-form-item__content {
//   line-height: normal;
// }

.el-form-item {
  margin-bottom: 10px;
}
</style>
